<template>
    <div class="success">
         <div class="success_box">
             <div class="success_tan">
                <img src="../../images/success/3.png" class="imgs" alt="">
                <img src="../../images/success/4.png" alt="" class="success_img" @click="$router.push('./detail')">
                 <div class="success_shop">
                       <dl>
                           <img src="../../images/success/10.png" alt="" class="bu">
                           <dt>扫地机器人</dt>
                           <dd><img src="../../images/success/5.png" alt=""></dd>
                           <dd class="button"><img src="../../images/success/9.png" alt=""></dd>
                       </dl>
                        <dl>
                           <dd><img src="../../images/success/10.png" alt="" class="bu"></dd>
                           <dt>全身电动按摩椅</dt>
                           <dd><img src="../../images/success/6.png" alt=""></dd>
                           <dd class="button"><img src="../../images/success/9.png" alt=""></dd>

                       </dl>
                         <dl>
                            <dd><img src="../../images/success/10.png" alt="" class="bu"></dd>
                           <dt>按摩泡脚桶</dt>
                           <dd><img src="../../images/success/7.png" alt=""></dd>
                           <dd class="button"><img src="../../images/success/9.png" alt=""></dd>

                       </dl>
                        <dl>
                           <dd><img src="../../images/success/10.png" alt="" class="bu"></dd>
                           <dt>颈椎按摩椅</dt>
                           <dd><img src="../../images/success/8.png" alt=""></dd>
                           <dd class="button"><img src="../../images/success/9.png" alt=""></dd>

                       </dl>
                 </div>
            </div>
        
         </div>
         
    </div>
</template>

<script>
export default {

}
</script>

<style  lang="scss" scoped>
.success{
    width: 100%;
    height:100%;
    background:#9A1823;
   .success_box{
    width: 100%;
    height: 180px;
    background-image: url("../../images/success/1.png");
    background-size: 100% 100%;
    position: absolute;
    .success_tan{
       width: 85%;
       height: 285%;
       display: flex;
       flex-direction: column;
       background: #B0131E;
       position: absolute;
       transform: translate(-1%, 1%);
       top:80%;
       left: 8%;
       border-radius: 20px;
       padding: 10px 20px;
       .imgs{
           width: 280px;
           height: 50px;
       }
       .success_img{
           width: 280px;
           height: 120px;
       }
       .success_shop{
           width: 282px;
           height: 410px;
           margin-top: 10px;
           display: flex;
           flex-wrap: wrap;
           dl{
               width: 50%;
               height: 160px;
               background: #FDEED8;
               dt{
                   text-align: center;
                   line-height: 35px;
               }
               dd img{
                   width: 90px;
                   height: 70px;
                   margin-left:20px;
               }
               .button img{
                   width: 100px;
                   height: 20px;
               }
               .bu{
                   width: 100px;
                   height: 20px;
                   margin: 0px 30px;
               }
           }
       }
   }
   }
   

}

</style>